<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>11-组件的生命周期</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/prop-types.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
    class Life extends React.Component {

        state = {
            timer: null,
            opacity: 0.618
        }

        /*** 组件渲染执行 */
        render() {
            console.log("组件开始渲染");
            return (
                <div>
                    <h1 style={{opacity: this.state.opacity}}>维护祖国统一</h1>
                    <button onClick={this.unmount}>卸载组件</button>
                </div>
            )
        }

        /*** 组件挂载完毕执行 */
        componentDidMount() {
            console.log("组件挂载完成");
            this.state.timer = setInterval(() => {
                let {opacity} = this.state
                opacity -= 0.1
                if (opacity <= 0) {
                    opacity = 1
                }
                this.setState({
                    opacity: opacity
                })
            }, 200)
        }

        /*** 组件卸载之前执行 */
        componentWillUnmount() {
            console.log("组件卸载之前执行");
            clearInterval(this.state.timer)
        }

        /** 卸载组件 */
        unmount = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById("app"))
        }
    }

    // 渲染数据
    ReactDOM.render(<Life/>, document.getElementById('app'));
</script>
</html>
